<template>
  <div class="mainContent">
    <div class="headerTitle">综合监督管理平台-有限空间作业监管</div>
    <!-- 项目选择切换 -->
    <div class="topProjectSelect">
      <div @click="goOthers('space')" class="top1"></div>
      <div @click="goOthers('dust')" class="top1 top2"></div>
      <div @click="goOthers('danger')" class="top1 top3"></div>
      <div @click="goOthers('')" class="top1 top4"></div>
      <div @click="goOthers('')" class="top1 bottom1"></div>
      <div @click="goOthers('')" class="top1 bottom1 bottom2"></div>
      <div @click="goOthers('factory')" class="top1 bottom1 bottom3"></div>
      <div @click="goOthers('')" class="top1 bottom1 bottom4"></div>
    </div>
    <!-- 左右侧边内容 -->
    <div class="content">
      <div class="commonStatic aside-left-show">
        <div class="innerTitle">
          <div class="descTitle">公共统计数据</div>
          <div class="detail">查看详情</div>
        </div>
        <div class="company" @click="showCompanyDialog">
          <div class="companyNum">{{ companysNumObj.companyAccess }}</div>
          <div class="companyNumR">
            +{{ publicNewDateMonthObj.companyAccessNew }}
          </div>
        </div>
        <div class="signal">
          <div class="signalNum">{{ companysNumObj.sceneInfo }}</div>
          <div class="signalNumR">
            +{{ publicNewDateMonthObj.sceneInfoNew }}
          </div>
        </div>
        <div class="equip">
          <div class="equipNum">{{ companysNumObj.deviceAccess }}</div>
          <div class="equipNumR">
            +{{ publicNewDateMonthObj.deviceAccessNew }}
          </div>
        </div>
        <div class="video">
          <div class="videoNum">{{ companysNumObj.videoAccess }}</div>
          <div class="videoNumR">
            +{{ publicNewDateMonthObj.videoAccessNew }}
          </div>
        </div>
      </div>
      <div class="leftBox aside-left-show">
        <div class="noClearCompany">
          <div class="allDescTitleL">高风险企业</div>
          <div class="allDescTitleR">查看详情</div>
          <div class="selectCondition">
            <div class="leftS">总览</div>
            <div class="middle">
              <div class="selectTitle">
                <div
                  style="
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                  "
                >
                  {{ areaCodeValue }}<i class="el-icon-arrow-down"></i>
                </div>
                <div class="selectBox" v-if="areaCodeList.length > 0">
                  <div
                    class="selectItem"
                    v-for="item in areaCodeList"
                    :key="item.id"
                    @click="chooseArea(item.dictName, item.id)"
                  >
                    {{ item.dictName }}
                  </div>
                </div>
              </div>
            </div>
            <div class="rightS">
              <div class="selectTitle2">
                <div
                  style="
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                  "
                >
                  {{ industryCategoryValue }}<i class="el-icon-arrow-down"></i>
                </div>
                <div class="selectBox2" v-if="industryCategoryList.length > 0">
                  <div
                    class="selectItem2"
                    v-for="item in industryCategoryList"
                    :key="item.id"
                    @click="chooseIndustry(item.dictName, item.id)"
                  >
                    {{ item.dictName }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="lineBox">
            <div v-if="noClearCompanyList.cityList.length > 0">
              <div id="noClearCompanyLine" ref="noClearCompanyLine"></div>
            </div>
            <div
              v-else
              style="color: #fff; text-align: center; margin-top: 100px"
            >
              暂无数据
            </div>
          </div>
        </div>
        <div class="alarmWarning">
          <div class="allDescTitleL">气体报警</div>
          <!-- <div class="videoDesc">视频报警</div> -->
          <div class="allDescTitleR">查看详情</div>
          <div class="alarmWarningC">
            <div
              @click="chooseAlarmDate('')"
              :class="['alarmDesc', { active: isVideoTrue === '' }]"
            >
              总览
            </div>
            <div
              @click="chooseAlarmDate('day')"
              :class="['alarmDesc', { active: isVideoTrue === 'day' }]"
            >
              今日
            </div>
            <div
              @click="chooseAlarmDate('week')"
              :class="['alarmDesc', { active: isVideoTrue === 'week' }]"
            >
              本周
            </div>
            <div
              @click="chooseAlarmDate('month')"
              :class="['alarmDesc', { active: isVideoTrue === 'month' }]"
            >
              本月
            </div>
          </div>
          <div v-show="sensorAlarmPieList.length > 0">
            <div id="alarmDescPie"></div>
          </div>
          <div
            v-show="sensorAlarmPieList.length <= 0"
            style="color: #fff; text-align: center; margin-top: 100px"
          >
            暂无数据
          </div>
        </div>
      </div>
      <div class="rightBox aside-right-show">
        <div class="jobSupervision">
          <div class="allDescTitleR">查看详情</div>
          <div class="alarmWarningC">
            <div
              @click="chooseVideoToday('')"
              :class="['alarmDesc', { active: isVideoToday === '' }]"
            >
              总览
            </div>
            <div
              @click="chooseVideoToday('day')"
              :class="['alarmDesc', { active: isVideoToday === 'day' }]"
            >
              今日
            </div>
            <div
              @click="chooseVideoToday('week')"
              :class="['alarmDesc', { active: isVideoToday === 'week' }]"
            >
              本周
            </div>
            <div
              @click="chooseVideoToday('month')"
              :class="['alarmDesc', { active: isVideoToday === 'month' }]"
            >
              本月
            </div>
          </div>
          <div class="workBox">
            <div class="noClearBusiness">
              {{ youxianSpaceSituationTodayObj.SpaceVideoNum }}
            </div>
            <div class="noClearBusiness alarmTody">
              {{ youxianSpaceSituationTodayObj.SpaceAlarmNum }}
            </div>
          </div>
        </div>
        <div class="videoAlarmBox">
          <div class="allDescTitleL">视频报警</div>
          <div class="allDescTitleD">查看详情</div>
          <div class="alarmWarningC">
            <div
              @click="chooseVideoA('')"
              :class="['alarmDesc', { active: isVideoAlarm === '' }]"
            >
              总览
            </div>
            <div
              @click="chooseVideoA('day')"
              :class="['alarmDesc', { active: isVideoAlarm === 'day' }]"
            >
              今日
            </div>
            <div
              @click="chooseVideoA('week')"
              :class="['alarmDesc', { active: isVideoAlarm === 'week' }]"
            >
              本周
            </div>
            <div
              @click="chooseVideoA('month')"
              :class="['alarmDesc', { active: isVideoAlarm === 'month' }]"
            >
              本月
            </div>
          </div>
          <div class="companyBox">
            <div
              class="companyList"
              v-for="(item, index) in companyVideoList"
              :key="index"
            >
              <div class="leftC">
                <div>{{ item.enterpriseName }}</div>
                <div>{{ item.startTime }}</div>
              </div>
              <div class="rightC" @click="chooseBaoJ(item)">
                <img class="rightImg" src="@/assets/dust/组 74@1x.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sheBeiZuo1dialogVisible" v-if="isDialogShow === 'space'">
      <div class="closeX">
        <img
          src="@/assets/factory/组 39@1x.png"
          alt=""
          @click="closeDialogShow"
        />
      </div>
      <div class="title">接入企业</div>
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '32px',
          }"
          :header-cell-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          @row-click="goThirdView"
        >
          <el-table-column
            header-align="center"
            prop="companyName"
            label="接入单位"
            width="220"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="companyPrincipal"
            label="单位负责人"
            width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="companyPhone"
            label="负责人电话"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="companyAddress"
            label="单位地址"
            width="300"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="equipStatusName"
            label="单位状态"
            width="80"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.companyState === '营业'">{{
                scope.row.companyState
              }}</span>
              <span v-else style="color: #ff9c9c">{{
                scope.row.companyState
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="params.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItemCount"
          @current-change="currentPage"
        />
      </div>
    </div>
    <div class="areaSelect"></div>
    <div class="footerNav"></div>
  </div>
</template>

<script>
import {
  youxianSpaceSituationToday,
  youxianSpaceRiskEnterprise,
  youxianSpaceAlarmEnterprise,
} from '@/api/space'
import { companysNum, publicNewDateMonth } from '@/api/home'
import { companyDetails } from '@/api/home'
export default {
  name: 'homeVue',
  props: {},
  components: {},
  data() {
    return {
      companysNumObj: {
        companyAccess: '-',
        deviceAccess: '-',
        sceneInfo: '-',
        videoAccess: '-',
      },
      publicNewDateMonthObj: {
        videoAccessNew: '-',
        deviceAccessNew: '-',
        sceneInfoNew: '-',
        companyAccessNew: '-',
      },
      isVideoAlarm: '',
      isVideoToday: '',
      companyVideoList: [
        {
          enterpriseName: '浙江德易精密机械有限公司',
          startTime: '2024-01-13 12:59',
        },
        {
          enterpriseName: '浙江德易精密机械有限公司',
          startTime: '2024-01-13 12:59',
        },
        {
          enterpriseName: '浙江德易精密机械有限公司',
          startTime: '2024-01-13 12:59',
        },
        {
          enterpriseName: '浙江德易精密机械有限公司',
          startTime: '2024-01-13 12:59',
        },
        {
          enterpriseName: '浙江德易精密机械有限公司',
          startTime: '2024-01-13 12:59',
        },
        {
          enterpriseName: '浙江德易精密机械有限公司',
          startTime: '2024-01-13 12:59',
        },
        {
          enterpriseName: '浙江德易精密机械有限公司',
          startTime: '2024-01-13 12:59',
        },
        {
          enterpriseName: '浙江德易精密机械有限公司',
          startTime: '2024-01-13 12:59',
        },
        {
          enterpriseName: '浙江德易精密机械有限公司',
          startTime: '2024-01-13 12:59',
        },
      ],
      globalData: {
        companyNum: 0,
        monitoringScenariosNum: 0,
        equipNum: 0,
        videoNum: 0,
        companyNewNum: 0,
        scenariosNewNum: 0,
      },
      areaCodeList: [],
      areaCodeValue: '按区域查看',
      industryCategoryValue: '按行业查看',
      industryCategoryList: [],
      isVideoTrue: '',
      companyVideoItem: '',
      workSuperviseData: {
        unclearEnterprisesNum: 0,
        alarmNum: 0,
      },
      noClearCompanyList: {
        cityList: [],
        line1Count: [],
        line2Count: [],
      },
      sensorAlarmPieList: [],
      youxianSpaceSituationTodayObj: {
        SpaceAlarmNum: '-',
        SpaceVideoNum: '-',
      },
      isDialogShow: '',
      tableData: [],
      totalItemCount: null,
      params: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  methods: {
    goOthers(path) {
      if (path !== this.$route.path.substring(1)) {
        this.$router.push(
          `/${path}`,
          () => {},
          () => {}
        )
      } else {
        this.$router.push('/home')
      }
    },
    async chooseAlarmDate(params) {
      this.isVideoTrue = params
      this.youxianSpaceAlarmEnterprise(params)
    },
    chooseVideoA(params) {
      this.isVideoAlarm = params
    },
    chooseVideoToday(params) {
      this.isVideoToday = params
      this.youxianSpaceSituationToday(params)
    },
    createNoClearCompanyLine() {
      let line1 = this.$echarts.getInstanceByDom(
        document.getElementById('noClearCompanyLine')
      )
      console.log(line1)
      if (
        this.noClearCompanyList.line1Count.length > 0 &&
        (line1 == undefined || line1 == null)
      ) {
        line1 = this.$echarts.init(
          document.getElementById('noClearCompanyLine')
        )
      }
      line1.setOption({
        color: ['#65779E'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '5%', //距离dom间距
          right: '4%',
          top: '10%',
          bottom: '1%',
        },
        xAxis: [
          {
            type: 'value',
            axisPointer: {
              type: 'shadow',
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              verticalAlign: 'bottom',
              align: 'left',
              padding: [10, 10, 14, 6],
              textStyle: {
                fontSize: 16,
                color: '#fff',
              },
            },
            // 纵坐标数据
            data: this.noClearCompanyList.cityList,
            yAxisIndex: 0,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '二级警报',
            type: 'bar',
            barWidth: '10',
            stack: '总量',
            data: this.noClearCompanyList.line2Count,
            itemStyle: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 16,
                },
                color: '#FF1D1D',
              },
            },
          },
          {
            name: '一级警报',
            type: 'bar',
            barWidth: '10',
            stack: '总量',
            data: this.noClearCompanyList.line1Count,
            itemStyle: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 16,
                },
                color: '#F3772A',
                barBorderRadius: [0, 20, 20, 0],
              },
            },
          },
        ],
      })
    },
    getAlarmDescPie() {
      let alarmDescPie = this.$echarts.getInstanceByDom(
        document.getElementById('alarmDescPie')
      )
      if (
        (this.sensorAlarmPieList.length > 0 && alarmDescPie == undefined) ||
        alarmDescPie == null
      ) {
        alarmDescPie = this.$echarts.init(
          document.getElementById('alarmDescPie')
        )
      }
      alarmDescPie.setOption({
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: 'middle',
          left: '40%',
          height: 250,
          orient: 'vertical',
          itemWidth: 15,
          textStyle: {
            fontWeight: 400,
            fontSize: 12,
            color: '#fff',
          },
        },
        series: [
          {
            type: 'pie',
            center: ['20%', '50%'],
            radius: ['50%', '85%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {
              show: false,
            },
            data: this.sensorAlarmPieList,
          },
        ],
      })
    },
    async youxianSpaceSituationToday(type) {
      const res = await youxianSpaceSituationToday({ type })
      this.youxianSpaceSituationTodayObj = res.data
    },
    async companysNum(type) {
      const res = await companysNum({ type })
      this.companysNumObj = res.data
    },
    async publicNewDateMonth(type) {
      const res = await publicNewDateMonth({ type })
      this.publicNewDateMonthObj = res.data
    },
    async youxianSpaceRiskEnterprise() {
      const res = await youxianSpaceRiskEnterprise()
      const list = res.data.slice(0, 5)
      this.noClearCompanyList.cityList = list.map((item) => item.enterpriseName)
      this.noClearCompanyList.line1Count = list.map((item) => item.level1Count)
      this.noClearCompanyList.line2Count = list.map((item) => item.level2Count)
      setTimeout(() => {
        this.createNoClearCompanyLine()
      }, 500)
    },
    async youxianSpaceAlarmEnterprise(type) {
      const res = await youxianSpaceAlarmEnterprise({ type })
      const list = res.data.slice(0, 5)
      const newList = list.map((item) => {
        return {
          value: item.alarmCount,
          name: item.enterpriseName,
          itemStyle: { color: '#FF9234' },
        }
      })
      const colorList = ['#FF9234', '#5DE1D4', '#3CB7A5', '#1D7B6D', '#134D46']
      newList.forEach((item, index) => {
        item.itemStyle.color = colorList[index]
      })
      this.sensorAlarmPieList = newList
      if (this.sensorAlarmPieList.length > 0) {
        setTimeout(() => {
          this.getAlarmDescPie()
        }, 500)
      }
    },
    showCompanyDialog() {
      this.isDialogShow = 'space'
      this.companyDetails(this.params)
    },
    closeDialogShow() {
      this.isDialogShow = ''
    },
    currentPage(pageNum) {
      const params = {
        identificationCode: 'SC006',
        pageNum: pageNum,
        pageSize: this.params.pageSize,
      }
      this.companyDetails(params)
    },
    async companyDetails(params) {
      const res = await companyDetails({
        identificationCode: 'SC006',
        pageNum: params.pageNum,
        pageSize: params.pageSize,
      })
      console.log(res)
      this.tableData = res.data
      this.totalItemCount = res.total
    },
    goThirdView(row) {
      console.log(row);
      if (row.companyName.trim() === '浙江美欣达印染科技股份有限公司') {
        window.location.href =
          'https://lindro.cn/yx-system/huzhouGovernment/yrScreen/index.html'
      } else if (row.companyName.trim() === '安吉旺能再生资源利用有限公司') {
        window.location.href =
          'https://lindro.cn/yx-system/huzhouGovernment/ajwnScreen/index.html'
      }
    },
  },
  mounted() {
    this.youxianSpaceAlarmEnterprise('')
    this.youxianSpaceRiskEnterprise()
  },
  created() {
    this.companysNum('SC006')
    this.publicNewDateMonth('SC006')
    this.youxianSpaceSituationToday('')
  },
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.mainContent {
  width: 1920px;
  height: 1080px;
  position: relative;
  background-image: url('@/assets/common/WechatIMG2357.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.headerTitle {
  background-image: url('@/assets/common/HEAD@1x (1).png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  box-sizing: border-box;
  width: 1920px;
  height: 102px;
  text-align: center;
  padding-top: 9px;
  font-size: 40px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}
.footerNav {
  background-image: url('@/assets/common/组 48054@1x.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  width: 1920px;
  height: 48px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.areaSelect {
  background-image: url('@/assets/common/Buttom_Nav@1x.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  width: 684px;
  height: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 52px;
}
.topProjectSelect {
  .top1 {
    width: 195px;
    height: 96px;
    position: absolute;
    top: 105px;
    left: 558px;
    background-image: url('@/assets/common/组 211@1x.png');
    background-size: cover;
    background-repeat: no-repeat;
  }
  .top2 {
    left: 766px;
    background-image: url('@/assets/common/组 48065@1x.png');
  }
  .top3 {
    left: 973px;
    background-image: url('@/assets/common/组 48066@1x.png');
  }
  .top4 {
    left: 1190px;
    background-image: url('@/assets/common/组 48067@1x.png');
  }
  .bottom1 {
    top: 232px;
    background-image: url('@/assets/common/组 48068@1x.png');
  }
  .bottom2 {
    left: 766px;
    background-image: url('@/assets/common/组 48069@1x.png');
  }
  .bottom3 {
    left: 973px;
    background-image: url('@/assets/common/组 48063@1x.png');
  }
  .bottom4 {
    left: 1190px;
    background-image: url('@/assets/common/组 48070@1x.png');
  }
}
.content {
  // position: relative;
  .commonStatic {
    background-image: url('@/assets/home/组 48059@1x.png');
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    left: 11px;
    top: 72px;
    width: 420px;
    height: 282px;
    .innerTitle {
      color: #fff;
      background-image: url('@/assets/home/组 48060@1x.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 405px;
      box-sizing: border-box;
      height: 36px;
      font-size: 20px;
      font-weight: bold;
      position: relative;
      .descTitle {
        position: absolute;
        left: 15px;
        top: 7px;
      }
      .detail {
        color: #5de1d4;
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        top: 5px;
        left: 327px;
        cursor: pointer;
      }
    }

    .company {
      background-image: url('@/assets/home/组 231@1x.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 180px;
      height: 92px;
      position: absolute;
      left: 20px;
      top: 58px;
      cursor: pointer;
      .companyNum {
        position: absolute;
        left: 74px;
        top: 15px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
      }
      .companyNumR {
        position: absolute;
        top: 2px;
        right: 6px;
        color: #103f3a;
        font-size: 12px;
        font-weight: bold;
      }
    }
    .signal {
      background-image: url('@/assets/home/组 48062@1x.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 180px;
      height: 92px;
      position: absolute;
      left: 220px;
      top: 58px;
      .signalNum {
        position: absolute;
        left: 74px;
        top: 15px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
      }
      .signalNumR {
        position: absolute;
        top: 2px;
        right: 6px;
        color: #103f3a;
        font-size: 12px;
        font-weight: bold;
      }
    }
    .equip {
      background-image: url('@/assets/home/组 229@1x (1).png');
      background-size: cover;
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-position: center;
      width: 180px;
      height: 93px;
      position: absolute;
      left: 20px;
      top: 166px;
      .equipNum {
        position: absolute;
        left: 74px;
        top: 15px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
      }
      .equipNumR {
        position: absolute;
        top: 2px;
        right: 6px;
        color: #103f3a;
        font-size: 12px;
        font-weight: bold;
      }
    }
    .video {
      background-image: url('@/assets/home/组 222@1x (1).png');
      background-size: cover;
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-position: center;
      width: 180px;
      height: 93px;
      position: absolute;
      left: 220px;
      top: 166px;
      .videoNum {
        position: absolute;
        left: 74px;
        top: 15px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
      }
      .videoNumR {
        position: absolute;
        top: 2px;
        right: 6px;
        color: #103f3a;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
  .allDescTitleL {
    position: absolute;
    left: 30px;
    top: 7px;
    font-size: 20px;
    color: #fff;
    font-weight: 800;
  }
  .allDescTitleR {
    color: #5de1d4;
    font-size: 12px;
    position: absolute;
    right: 45px;
    top: 4px;
    cursor: pointer;
  }
  .leftBox {
    position: absolute;
    left: 10px;
    top: 364px;
    .videoDesc {
      color: #3cb7a5;
      font-size: 20px;
      position: absolute;
      left: 170px;
      top: 7px;
    }
    .firstDesc {
      width: 420px;
      height: 282px;
      background-image: url('@/assets/dust/LEFT_01@1x (2).png');
      position: relative;
      margin-bottom: 10px;
      img {
        width: 180px;
        height: 92px;
      }
      .zu185 {
        position: absolute;
        left: 20px;
        top: 58px;
        cursor: pointer;
      }
      .zu188 {
        position: absolute;
        left: 220px;
        top: 58px;
      }
      .zu186 {
        position: absolute;
        left: 20px;
        top: 166px;
        cursor: pointer;
      }
      .zu187 {
        position: absolute;
        left: 220px;
        top: 166px;
      }

      .accessFont {
        font-size: 28px;
        color: #fff;
        font-weight: 800;
      }
      .accessFontR {
        color: #103f3a;
        font-size: 12px;
      }
      .accessEnterprises {
        position: absolute;
        left: 94px;
        top: 73px;
        cursor: pointer;
      }
      .accessEnterprisesR {
        position: absolute;
        left: 170px;
        top: 58px;
      }
      .accessArea {
        position: absolute;
        left: 294px;
        top: 75px;
      }
      .accessAreaR {
        position: absolute;
        left: 365px;
        top: 58px;
      }
      .accessDevice {
        position: absolute;
        left: 94px;
        top: 178px;
        cursor: pointer;
      }
      .accessDeviceR {
        position: absolute;
        left: 170px;
        top: 165px;
        cursor: pointer;
      }
      .accessVideo {
        position: absolute;
        left: 294px;
        top: 176px;
      }
      .accessVideoR {
        position: absolute;
        left: 365px;
        top: 165px;
      }
    }
    .noClearCompany {
      width: 420px;
      height: 346px;
      background-image: url('@/assets/dust/LEFT_02@1x.png');
      position: relative;
      margin-bottom: 10px;
      .selectCondition {
        box-sizing: border-box;
        width: 420px;
        padding-top: 42px;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 15px;
        font-size: 12px;

        .leftS {
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background-color: #5de1d4;
          color: #022627;
          border-radius: 2px;
          cursor: pointer;
        }
        .middle {
          margin-left: 2px;
          .selectTitle {
            position: relative;
            box-sizing: border-box;
            width: 88px;
            height: 20px;
            line-height: 20px;
            background-color: #022627;
            border: 1px solid #5de1d4;
            color: #5de1d4;
            text-align: center;
            line-height: 20px;
            border-radius: 2px;
            cursor: pointer;

            .selectBox {
              display: none;
              position: absolute;
              top: 20px;
              width: 88px;
              background-color: #022627;
              border: 1px solid #5de1d4;
              box-sizing: border-box;
              border-radius: 5px;
              z-index: 999;
            }
          }
          .selectItem {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .selectTitle:hover > .selectBox {
            display: block;
          }
          .selectItem:hover {
            color: #022627;
            background-color: #5de1d4;
          }
        }
        .rightS {
          margin-left: 2px;
          .selectTitle2 {
            position: relative;
            box-sizing: border-box;
            width: 88px;
            height: 20px;
            line-height: 20px;
            background-color: #022627;
            border: 1px solid #5de1d4;
            color: #5de1d4;
            text-align: center;
            line-height: 20px;
            border-radius: 2px;
            cursor: pointer;
            .selectBox2 {
              z-index: 999;
              display: none;
              position: absolute;
              top: 20px;
              width: 88px;
              background-color: #022627;
              border: 1px solid #5de1d4;
              box-sizing: border-box;
              border-radius: 5px;
            }
            .selectItem2 {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .selectItem2:hover {
              color: #022627;
              background-color: #5de1d4;
            }
          }
          .selectTitle2:hover > .selectBox2 {
            display: block;
          }
        }
      }
      .lineBox {
        width: 420px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        img {
          display: block;
          margin-bottom: 19px;
        }
        .lastImg {
          margin-bottom: 0;
        }
      }
      #noClearCompanyLine {
        width: 403px;
        height: 260px;
      }
    }
    .alarmWarning {
      width: 420px;
      height: 316px;
      background-image: url('@/assets/dust/组 48076@1x.png');
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      #alarmDescPie {
        margin-top: 30px;
        margin-left: 5px;
        width: 420px;
        height: 180px;
      }
      .alarmWarningC {
        box-sizing: border-box;
        width: 420px;
        padding-top: 32px;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 15px;
        font-size: 12px;

        .alarmDesc {
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #59dace;
          border-radius: 2px;
          margin-left: 5px;
          background-color: #022627;
          border: 1px solid #59dace;
          cursor: pointer;
        }
        .active {
          background-color: #5de1d4;
          color: #022627;
        }
      }
    }
  }
  .rightBox {
    position: absolute;
    right: 10px;
    top: 72px;
    .jobSupervision {
      width: 420px;
      height: 360px;
      background-image: url('@/assets/dust/Right_002613@1x.png');
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      margin-bottom: 10px;
      position: relative;
      .workBox {
        font-size: 32px;
        font-weight: bold;
        color: #fff;
      }
      .noClearBusiness {
        position: absolute;
        top: 115px;
        right: 40px;
      }
      .alarmTody {
        position: absolute;
        top: 239px;
        right: 40px;
      }
      .alarmWarningC {
        box-sizing: border-box;
        width: 420px;
        padding-top: 32px;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 15px;
        font-size: 12px;
        margin-bottom: 33px;
        .alarmDesc {
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #59dace;
          border-radius: 2px;
          margin-left: 5px;
          background-color: #022627;
          border: 1px solid #59dace;
          cursor: pointer;
        }
        .active {
          background-color: #5de1d4;
          color: #022627;
        }
      }
    }
    .videoAlarmBox {
      width: 420px;
      height: 594px;
      background-image: url('@/assets/dust/Right_020@1x.png');
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      box-sizing: border-box;
      // padding-top: 81px;
      .alarmWarningC {
        box-sizing: border-box;
        width: 420px;
        padding-top: 32px;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 15px;
        font-size: 12px;
        margin-bottom: 33px;
        .alarmDesc {
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #59dace;
          border-radius: 2px;
          margin-left: 5px;
          background-color: #022627;
          border: 1px solid #59dace;
          cursor: pointer;
        }
        .active {
          background-color: #5de1d4;
          color: #022627;
        }
      }
      .allDescTitleD {
        position: absolute;
        left: 328px;
        top: 4px;
        color: #5de1d4;
        font-size: 12px;
        cursor: pointer;
      }
      .companyBox {
        padding-left: 30px;
        padding-right: 14px;
        .companyList {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #fff;
          margin-bottom: 19px;
          .rightC {
            .rightImg {
              width: 94px;
              height: 32px;
              cursor: pointer;
            }
          }
          .leftC {
            font-size: 14px;
            color: #fff;
          }
        }
      }
    }
  }
}
.sheBeiZuo1dialogVisible {
  width: 960px;
  height: 580px;
  background-image: url('@/assets/factory/矩形 201@1x.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 350px;
  .closeX {
    display: flex;
    justify-content: right;
    padding: 4px;
    img {
      cursor: pointer;
    }
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    padding-left: 30px;
    margin-bottom: 8px;
    .subTitle {
      color: #9e9e9e;
      font-size: 12px;
    }
  }
  .table {
    padding: 0 30px;
    .el-table .warning-row {
      background-color: transparent;
      background: #022627 !important;
    }
    .el-table::before {
      display: none;
    }
  }
  .footerPage {
    width: 100%;
    text-align: center;
    margin: 20px auto 0;

    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #62c1b2 !important; // 进行修改选中项背景和字体
      color: #fff;
    }
  }
  .picBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 44px;
    margin-bottom: -31px;
    box-sizing: border-box;
    img {
      width: 429px;
      height: 214px;
      margin-bottom: 31px;
    }
  }
  ::v-deep .el-table__empty-block {
    background-color: #053a3b !important;
    border: none;
    .el-table__empty-text {
      color: #fff;
    }
  }
}
</style>
